<script lang="ts" setup>
import { onMounted, ref, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import { Ref } from "vue";
import navTo from "@/utils/navTo";
import { formatEvmAddress } from "@/utils/format";
import { getItem, removeItem, setItem } from "@/utils/utils";
import i18n from "@/i18n";
import { useRoute } from "vue-router";
import LoginForm from "./LoginForm.vue";
import { signupByWallet, userSignRandom } from "@/api/games";
//邀请信息
const headerRef = ref();

const bindInviteShow = ref(false);
const defaultCode = ref<string>("");
const logged = ref(false);
const route = useRoute();
const inviteCode = ref(null);
const envo_wallet = ref(null);

const props = defineProps<{
  // refreshData?: Function;
}>();

const PersonalCenterShow = ref(false);

let userInfo = ref(getItem("userInfo") ? JSON.parse(getItem("userInfo")) : {});
const uuid = ref(null);
onMounted(async () => {
  const fpPromise = await import("https://openfpcdn.io/fingerprintjs/v4");
  const xx = await fpPromise.load();
  const yy = await await xx.get();
  console.log("yy", yy.visitorId);
  uuid.value = yy.visitorId;

  // removeItem("userInfo");

  if (route.query.inviteCode) {
    inviteCode.value = route.query.inviteCode;
  }

  if (route.query.envo_wallet) {
    envo_wallet.value = route.query.envo_wallet;
  }
});
const showLangPopover = ref(false);

const setLangFun = (type: number) => {
  if (type == 1) {
    i18n.global.locale = "zh";
    setItem("lang", "zh");
    showLangPopover.value = false;
  } else {
    i18n.global.locale = "en";
    setItem("lang", "en");
    showLangPopover.value = false;
  }
};

const SignupByWallet = async () => {
  try {
    // wallet: envo_wallet.value || "0xeF7493B1C22b87Cc88b00C300552eE3a99686702",
    let params: any = {
      wallet: "0xeF7493B1C22b87Cc88b00C300552eE3a99686702",
      currency: "CNY",
      client_uid: uuid.value,
    };
    if (inviteCode.value && inviteCode.value != "") {
      params.invit_code = inviteCode.value;
    }
    let res = await signupByWallet(params);
    console.log("signupByWallet:", res.value);
    setItem("userInfo", JSON.stringify(res.value.data));
    userInfo.value = getItem("userInfo") ? JSON.parse(getItem("userInfo")) : {};
  } catch (error) {}
};

const UserSignRandom = async () => {
  try {
    let params: any = {
      currency: "CNY",
      client_uid: uuid.value,
    };
    if (inviteCode.value && inviteCode.value != "") {
      params.invit_code = inviteCode.value;
    }
    let res = await userSignRandom(params);
    console.log("signupByWallet:", res.value);
    setItem("userInfo", JSON.stringify(res.value.data));
    userInfo.value = getItem("userInfo") ? JSON.parse(getItem("userInfo")) : {};
  } catch (error) {}
};

const logineShow = ref(false);

//授权成功
const handleLoginSuccess = (data: boolean) => {};

//授权取消
const handleLoginCancel = () => {};

const Login = () => {};

const lang = computed(() => {
  return i18n.global.locale;
});
</script>

<template>
  <div
    ref="headerRef"
    :class="{
      header: true,
    }"
  >
    <div class="flex justify-between headerBox" style="width: 100%">
      <div class="left">
        <div @click="navTo('/')" class="logo text-1-icon flex items-center">
          <div style="color: #fff">Splay</div>
        </div>
      </div>
      <div class="right">
        <van-popover v-if="userInfo?.username" class="LanguageSwitch">
          <!-- <div class="LanguageWrapper">
            <div @click="logout()">{{ $t("Disconnect") }}</div>
          </div> -->
          <template #reference>
            <div
              :class="{
                ConnectButton: true,
                ConnectAddress: !!userInfo.username,
              }"
              v-if="userInfo.username"
            >
              {{ userInfo.username }}
            </div>
          </template>
        </van-popover>
        <div
          :class="{
            ConnectButton: true,
            ConnectAddress: !!userInfo.username,
          }"
          v-if="!userInfo.username"
          @click="Login()"
        >
          <div class="ConnectText" @click="SignupByWallet">登录</div>
        </div>
        <div class="LanguageSwitch">
          <van-popover class="LanguageSwitch" v-model:show="showLangPopover">
            <div class="LanguageWrapper">
              <div @click="setLangFun(1)">中文</div>
              <div @click="setLangFun(2)">English</div>
            </div>
            <template #reference>
              <div
                :class="{
                  LanguageButton: true,
                  LanguageButtonBlack: showLangPopover,
                  LanguageButtonWhite: true,
                }"
              >
                <img src="@/assets/images/header/IntlWhite.svg" />
              </div>
            </template>
          </van-popover>
        </div>
      </div>
    </div>

    <LoginForm
      v-model:visible="logineShow"
      @success="handleLoginSuccess"
      @cancel="handleLoginCancel"
    />
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";

.HeaderIcon {
  margin-right: 16 * $_ru;
  width: 64 * $_ru;
  height: 64 * $_ru;
}

.HeaderIconZH {
  margin-right: 16 * $_ru;
  width: 220 * $_ru;
  height: 64 * $_ru;
}

.HeaderIconEN {
  margin-right: 16 * $_ru;
  width: 238 * $_ru;
  height: 64 * $_ru;
}

.HeaderText {
  color: #1b2028;

  font-family: Alimama ShuHeiTi;
  font-size: 32 * $_ru;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 260 * $_ru;
  @apply overflow-visible flex-shrink-0;
}

.LanguageSwitch {
  :deep(.van-popover__arrow) {
    --van-popover-light-background: transparent;
    --van-popover-dark-background: transparent;
    color: transparent !important;
  }

  :deep(.van-popover__content) {
    background: transparent !important;
    box-shadow: none;
  }
}
.ConnectText {
  width: 136 * $_ru;
  @apply flex-shrink-0;
}

.ConnectButton {
  /* width: 186*$_ru; */
  height: 64 * $_ru;
  padding: 14 * $_ru 0;
  border-radius: 80 * $_ru;
  border: 1px solid var(--1-icon, #fff);
  color: var(--1-icon, #fff);
  text-align: center;
  font-family: PingFang SC;
  font-size: 24 * $_ru;
  font-style: normal;
  font-weight: 400;
  margin-right: 16 * $_ru;
  @apply flex items-center justify-center overflow-visible;
}

.ConnectAddress {
  // background: var(--1-icon, #1b202a);
  color: #fff;
  padding: 0 30 * $_ru;
}

.LanguageWrapper {
  @apply flex flex-col items-center;
  padding: 32 * $_ru;
  gap: 32 * $_ru;
  background: var(--1-icon, #1b202a);
  border-radius: 32 * $_ru;
  transform: translateY(-10 * $_ru);
  color: #fff;
  text-align: center;
  font-family: PingFang SC;
  font-size: 24 * $_ru;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.LanguageButton {
  width: 96 * $_ru;
  height: 64 * $_ru;
  padding: 8 * $_ru 24 * $_ru;
  border-radius: 80 * $_ru;
  border: 1px solid var(--1-icon, #fff);

  color: var(--1-icon, #fff);
  text-align: center;
  font-family: PingFang SC;
  font-size: 24 * $_ru;
  font-style: normal;
  font-weight: 400;
  @apply flex items-center justify-center;
}

.LanguageButtonBlack {
  background: var(--1-icon, #1b202a);
}

.LanguageButtonWhite {
}

.header {
  .headerBox {
    padding: 24 * $_ru 40 * $_ru;
    background: #1a2c38;
    box-shadow: #0003 0 4px 6px -1px, #0000001f 0 2px 4px -1px;
  }

  .line {
    width: 100%;
    height: 1 * $_ru;
  }

  position: sticky;
  top: 0;
  z-index: 888;

  .left {
    display: flex;
    align-items: center;

    .logo {
    }
  }

  .right {
    display: flex;
    align-items: center;

    .iconBox {
      display: flex;
      align-items: center;

      .coinIcon {
        width: 48 * $_ru;
        height: 48 * $_ru;
        margin-right: 32 * $_ru;
      }

      .arrow {
        width: 20 * $_ru;
        height: 10 * $_ru;
      }
    }

    .JazzIcon {
      width: 48 * $_ru;
      height: 48 * $_ru;
    }

    > img {
      width: 48 * $_ru;
      height: 48 * $_ru;
    }
  }
}
</style>
